【jQuery】【购物车页面】实现近乎完美的联动交互（附GIF） |
您所在的位置：网站首页 › jquery 实现购物车功能 › 【jQuery】【购物车页面】实现近乎完美的联动交互（附GIF） |
【jQuery】【购物车页面】实现近乎完美的联动交互（附GIF）
|
效果图
注意：不涉及服务端逻辑，仅从前端页面的角度，用 jQuery实现 上述交互 结合上述GIF来看 1、全选 和 全不选， 同时更新底部 已选数量 和 总价。 2、勾选单个 商品的复选框，同时同时更新底部 已选数量 和 总价。如果勾选这一项后，恰好全部复选框都已经否选，则会同步修改 “全选” 这个复选框的状态。 3、通过上下的小箭头更新购物车中的某项商品的数量，同步更新 小计 和 总价。同时实现数量的 最大和最小 的边界控制。 4、监听商品数量输入框的 keyup 和 afterpaste（复制） 两个事件，将非数字的字符替换为空，防止用户通过键盘输入非法字符。同时 即时更新 小计 和 总价。 备注下面我会把 精简后的Html代码 和 完整的jQuery代码 贴出来。阅读Html代码时，忽略繁杂的样式，只需关注比较关键的地方及其name属性和id属性等，因为在jQuery定位元素需要用到这些属性。 阅读jQuery代码时，结合注释，阅读总体的实现逻辑。 代码 $(function() { // 加载页面后全部勾选 checkAll(); // 监听数量的输入框，绑定输入框的keyup和afterpaste事件 $("input[name='goodsNum']").on("keyup afterpaste", function() { // 如果输入框输入非数字的字符，立马将该字符替换为空 var corrected = $(this).val().replace(/[^\d]/g, ''); if (corrected == '' || corrected == 0) { corrected = 1; } $(this).val(corrected); // 更新小计和总价 $goodsItem = $(this).parents(".item-single"); // 单价 var price = parseFloat($goodsItem.find("span[name='price']").text()); // 数量 var num = parseInt($(this).val()); $goodsItem.find("span[name='subtotal']").html((price * num).toFixed(2)); // 如果当前商品勾选了。那么应该也更新总价 if ($goodsItem.find("input[name='checkItem']").prop("checked")) { calTotalCost(); } }); }); function checkAll() { //console.log(allChk); // jquery-1.4.2 没有prop()方法 // 注意测试，发现1.9.1无法使用attr()操作checked属性 // “全选”这个复选框的状态 var isSelectedAll = $("#cart-selectall").prop("checked"); $items = $("input[name='checkItem']"); // 全部复选框选中 $items.prop("checked", isSelectedAll); // 更改 已勾选复选框的数量 $("#selectedCount").html(isSelectedAll ? $items.length : 0); // 重新计算总价 calTotalCost(); } function checkOne(cur) { // 标志变量：是否已经全部选中 var isAllSelected = true; // 当改变当前复选框的状态时，判断是否所有复选框状已经全部选中 // 如果是，改变“全选”这个复选框的状态 $("input[name='checkItem']").each(function() { if (!$(this).prop("checked")) { isAllSelected = false; } }); $("#cart-selectall").prop("checked", isAllSelected); $("#selectedCount").html($("input[name='checkItem']:checked").length); // 重新计算总价 calTotalCost(); } // 计算勾选商品的总价 function calTotalCost() { var total = 0; $("span[name='price']").each(function(index, element) { // 判断是否勾选 if ($("input[name='checkItem']").eq(index).prop("checked")) { var price = parseFloat($(this).text()); // 单价，浮点数 // 注意不要用[]来取数组的某个元素，那样取出来是html代码，而并非jquery对象 var num = parseInt($("input[name='goodsNum']").eq(index).val()); // 数量，整数 total += (price * num); } }); //console.log(total); $("#totalCost").html(total); } // 加减商品数量 function addNum(obj, step) { // obj：当前对象 step：要加减的值 //console.log(num); var max = 10; // 最大值 $goodsNum = $(obj).parent(".a-btn").siblings("input[name='goodsNum']"); var cur = parseInt($goodsNum.val()); // 当前的数量 //console.log(cur); var corrected = 0; if (step > 0) { corrected = cur + step > max ? max : (cur + step); } else { corrected = cur + step < 1 ? 1 : (cur + step); } $goodsNum.val(corrected); // 更新小计 $goodsItem = $(obj).parents(".item-single"); //console.log($goodsItem); var price = parseFloat($goodsItem.find("span[name='price']").text()); $goodsItem.find("span[name='subtotal']").html((price * corrected).toFixed(2)); // 如果当前商品勾选了。那么应该也更新总价 if ($goodsItem.find("input[name='checkItem']").prop("checked")) { calTotalCost(); } } 1.我的购物车 2.填写订单信息 3.成功提交订单 全选 商品 ; 单价（元） 数量 小计 操作 ;
韩都衣舍2017韩版女装春装新款条纹显瘦百搭宽松v领七分袖衬衫潮
领券立减/单件包邮/七天无理由退换
;
¥60.00
有货
¥60.00
删除 收藏
;
韩都衣舍2017韩版女装春装新款条纹显瘦百搭宽松v领七分袖衬衫潮
领券立减/单件包邮/七天无理由退换
;
¥50.00
有货
¥50.00
删除 收藏
删除选中的商品 移到我的收藏
总价(不含运费)：
已节省：
已选择0件商品
|
【本文地址】
今日新闻 |
推荐新闻 |